<template>
  <div class="page">
    <top-header @LogInModelMask="LogInModelMask"></top-header>
    <div class="page-content flex">
      <div class="content-left">
        <!-- <keep-alive></keep-alive> -->
          <deVieCeLeftBox />
      </div>

      <div class="content-center">
        <!-- <keep-alive> </keep-alive> -->
          <deVieCeCenterBox />
       
      </div>

      <div class="content-right">
        <!-- <keep-alive></keep-alive> -->
          <deVieCeReightBox @LookPlan="LookPlan" ref="leftChild"  />
        

      </div>
    </div>


    
    <!-- 故障信息栏 查看方案 弹窗 -->
    <div class="messageBox" v-if="isMessageBox">
      <div class="combo-box box_asdaehr" style="padding: 0 10px 10px;">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="messageBox-title flex">
          <div>查看方案</div><img src="../../assets/imgx/message-bg.png" alt=""><span
            @click="isMessageBox = false, tableData = []">×</span>
        </div>
        <div class="box_right">
          <el-table :data="tableData" class="export_table" border style="width: 100%"
            :header-cell-style="{ borderColor: '#0D369F' }" :cell-style="{ borderColor: '#0D369F' }">
            <el-table-column prop="description" label="解决方案" width="190">
            </el-table-column>
            <el-table-column prop="workpieceName" label="关联工件" width="155">
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">


                <i v-if="scope.row.admin" class="el-icon-circle-check" @click="beneFiCiaTIonFun(scope.row)"></i>
                <i v-else class="el" @click="beneFiCiaTIonFun(scope.row)"></i>



              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="queding" @click="lookPlayBtn">确定</div>
      </div>
    </div>
    <!-- 登录 -->

    <div class="login_page" v-show="MaskLayerIsBool">

      <div class="box">
        <slotCom>
          <template v-slot:com>
            <div class="box_top">
              <div class="login_left">登录</div>
              <div class="login_center">
                <img src="../../assets/imgx/message-bg.png" alt="">
              </div>
              <div class="login_right" :style="{ 'color': '#3785CE' }" @click="MaskLayerIsBool = false">×</div>
            </div>
            <div class="box-button">
              <login @loginApiFun="loginApiFun" @checkOutBtn="checkOutBtn" />
            </div>
          </template>
        </slotCom>
      </div>

    </div>

    <!-- 员工 -->
    <div class="Staff" v-show="staffBool">
      <StaffClock ref="child" @staffUserListModel="staffUserListModel" @checkOutBtn="checkOutBtn" />
    </div>
    <div class="stafflogin" v-show="LoginMaskLayerIsBool">

      <div class="staff_box">
        <img src="@/assets/imgx/clockBack.png">
        <div class="staff_box_top">
          <span class="error" @click="LoginMaskLayerIsBool = false">×</span>

        </div>
        <div class="staff_box-button">
          <div class="content">
            <div class="form-style">
              <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号：" prop="userName">
                  <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                  <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">打卡</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

      </div>


    </div>

    <div class="lod" v-show="elIconWarningBool">

      <lodFile :doScTitle="doScTitle" />
    </div>


  </div>
</template>

<script>

import { mapGetters } from 'vuex'

import TopHeader from '@/components/TopHeader.vue'
const { setCookie, getCookie } = require('../../components/Login/cookie.js')

import {
  getPlanList,
  updateRecordStatus,
  CheckToWorkApi
} from "@/api/homeModeApi/index"
export default {
  name: "HomeView",
  components: {
    slotCom: () => import("@/components/SslotCom/top_index.vue"),
    lodFile: () => import("@/components/outfilelod/index.vue"),
    deVieCeLeftBox: () => import("./deviceleft/index.vue"),
    deVieCeCenterBox: () => import("./deviceCenter/index.vue"),
    deVieCeReightBox: () => import("./devicelight/index.vue"),
    'top-header': TopHeader,
    login: () => import("@/components/Login/index.vue"),
    StaffClock: () => import("@/components/staffClock/index.vue"),


  },
  computed: {
        ...mapGetters(["username", "token", "equipmentName"])
    },
  data() {
    // 账号输入框校验
    var validatename = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'));
      } else {
        return callback();
      }
    };
    // 密码输入框校验
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'));
      } else {
        return callback();
      }
    };
    return {
      doScTitle: "",
      staffBool: true,
      elIconWarningBool: false,
      LoginMaskLayerIsBool: false,
      MaskLayerIsBool: false,
      token: "",
      username: "",
      planId: [],
      oneObj: {},
      tableData: [],
      isMessageBox: false,// 故障信息栏 查看方案 弹窗,
      playItem: {},
      exceptId: "",
      shiftId: "",
      userId: "",
      rules: {
        userName: [
          { validator: validatename, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
      },
      form: {
        userName: '',
        password: ''
      }
    };
  },

  mounted() {
    if (!getCookie("token")) {
      this.$cookies.remove("username")

    } else {
      this.username = getCookie("username") ? getCookie("username") : ""
      this.token = getCookie("token") ? getCookie("token") : ""
    }
    setInterval(() => {
      if (!getCookie("token")) {
        this.$cookies.remove("username")

      } else {
        this.username = getCookie("username") ? getCookie("username") : ""
        this.token = getCookie("token") ? getCookie("token") : ""
      }
    }, 500000)

    //401
    if (this.$route.query.isLogin) {
      this.MaskLayerIsBool = this.$route.query.isLogin;//!?
    }

  },

  methods: {
    checkOutBtn(item) {
      this.doScTitle = item.msg;
      this.elIconWarningBool = true
      clearInterval(this.time3)
      this.time3 = setInterval(() => {
        this.elIconWarningBool = false
      }, 3000)
    },
    staffUserListModel(item) {
      this.form.userName = item.userName;
      this.shiftId = item.shiftId
      this.userId = item.userId
      this.LoginMaskLayerIsBool = true;
    },

    // 点击登录按钮调用接口判断是否是用户
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {

        if (valid) {
          CheckToWorkApi({ ...this.form, shiftId: this.shiftId, userId: this.userId }).then(res => {
            if (res.code == 200) {
              this.LoginMaskLayerIsBool = false;
              this.form.password = ""
            } else {
              this.checkOutBtn(res)
            }
          })


        } else {
          console.log('未输入账号或者密码');
          return false;
        }
      });
    },

    //查看方案 确定事件  解决当前方案出现的问题
    lookPlayBtn() {
      this.tableData.forEach((v, i) => {
        if (v.admin == true) {
          this.planId.push(v.planId)
          let arr = [...new Set(this.planId)]
          this.planId = arr
        }
      })
      updateRecordStatus({
        recordExceptId: this.playItem.recordExceptId,
        exceptId: this.exceptId,
        planIds: this.planId
      }).then(res => {
        if (res.code == 200) {
          this.isMessageBox = false
          this.tableData = []
        }
      })
    },
    // 查看方案选中不选中事件
    beneFiCiaTIonFun(item) {
      item.admin = !item.admin

    },

    //查看方案
    LookPlan(item) {

      this.exceptId = item.exceptId;
      this.playItem = item
      //if (getCookie("token")) {
        if (this.token) {
        this.isMessageBox = true,

          getPlanList({
            exceptId: this.exceptId
          }).then(res => {
            if (res.code == 200) {
              res.data.forEach((v, i) => {
                let newArr = { ...v, admin: false }
                this.tableData.push(newArr)

              })
              this.$refs.leftChild.getRecordList()

            }
          })

      } else {
        this.MaskLayerIsBool = true;
      }
    },
    //登录遮罩层
    LogInModelMask() {
      this.MaskLayerIsBool = true;
    },
    // 登录子传夫函数
    loginApiFun() {
      // debugger
      this.MaskLayerIsBool = false;
      this.staffBool = true
      this.$refs.child.childFun()
    },


  },

};
</script>


<style lang="less" scoped>
.stafflogin {
  width: 100%;
  height: 100%;
  background: rgba(1, 9, 30, .5);
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99;
  justify-content: center;
}

.Staff {

  position: absolute;
  top: 0px;
  left: 0px;
}



.lod {
  position: fixed;
  top: 5%;
  left: 41%;
  z-index: 999;

}
</style>




<style lang="less" scoped>
.staff_box {
  width: 476px;
  height: 405px;
  margin: 359px 722px 353px 735px;
  position: relative;

  img {
    position: absolute;
    background-size: 100% 100%;
    width: 100%;
  }

  .staff_box_top {
    position: absolute;
    top: 14px;
    right: 13px;

    .error {
      width: 30px;
      height: 100%;
      font-size: 40px;
      line-height: 40px;
      position: absolute;
      right: 12px;
      color: #3580C7;
      top: -11px;
      cursor: pointer;

    }
  }

  .staff_box-button {

    // height: 365px;
    position: absolute;
    top: 40px;

    .el-form-item /deep/ .el-form-item__content {
      width: 384px;
      margin-left: 44px !important;


    }

    .form-style {
      margin-top: 25px;
    }


  }
}

.el-input /deep/ .el-input__inner {
  background: RGBA(15, 46, 108, 1);
  border: 0px;
}

.el-button--primary {
  width: 380px;
  background: RGBA(0, 60, 159, 1);
  border: 0;
}

/deep/ .el-form-item__label {
  color: white !important;
  font-size: 14px;
}

.el-form-item /deep/ .el-form-item__content {
  margin-left: 0rem !important;
  width: 100%;
}


.box_asdaehr {
  height: 405px !important;
  background-color: #011a41 !important;
}

//登录
.login_page {
  width: 100%;
  height: 100%;
  background: rgba(1, 9, 30, .5);
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99;
  justify-content: center;

  .box {
    width: 476px;
    height: 405px;
    background: #011a41;
    margin: 359px 722px 353px 735px;


    .box_top {
      width: 100%;
      height: 30px;
      position: relative;
      display: flex;

      .login_left {
        width: 20%;
        text-align: center;
        line-height: 30px;
        color: white;
        font-size: 16px;

      }

      .login_center {
        width: 80%;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .login_right {
        position: absolute;
        font-size: 39px;
        right: 0px;
        top: -15px;
        color: white;

      }
    }

    .box-button {
      width: 453px;
      // height: 365px;
    }
  }
}


::-webkit-scrollbar {
  list-style: none;
  display: flex;
}




.el {
  display: inline-block;
  border: 1px solid #fff;
  background-color: transparent;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 10px;

}






::-webkit-scrollbar {
  list-style: none;
}





.combo-box {

  .box_right {
    width: 100%;
    height: 79%;
    overflow: auto;
  }
}

.el-table {
  width: 100%;
  overflow-y: auto;
}

::-webkit-scrollbar {
  display: none;

}

.page {
  height: 100%;
  width: 100%;
  position: relative;

  .page-content {
    height: 91%;

    .content-left,
    .content-right {
      width: 23%;
      height: 100%;
      display: flex;
      font-size: 16px;
    }

    .content-left {
      display: flex;



    }


    .content-center {
      height: 100%;
      width: 48%;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      justify-content: space-between;


    }

    .content-right {
      width: 403px;
      display: flex;
    }


  }

  .Clock {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(2, 12, 37, .5);
    z-index: 2023;

    .Clock_box {
      width: 500px;
      height: 360px;
      margin: 325px 672px 395px 748px;
    }
  }
}

.h4 {
  width: 17px;
  height: 38px;
  font-size: 18px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #FFFFFF;
}


.el-progress--circle .el-progress__text {
  top: 80%;
}

.el-progress--circle /deep/ .el-progress__text {
  font-family: SourceHanSansCN-Normal;
  color: #1df6fe !important;
  font-size: 16px !important;

  text-shadow: 0px 3px 9px #00e5ff;


}

.messageBox {
  width: 452px;
  height: 552px;
  position: absolute;
  top: 30%;
  right: 26%;
  z-index: 100;

  p:nth-child(3) {
    display: none;
  }

  p:nth-child(4) {
    display: none;
  }

  .messageBox-title {
    width: 100%;
    height: 40px;

    div {
      width: 80px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #FFFFFF;
    }

    img {
      object-fit: contain;
      position: absolute;
      top: 0;
      right: 0;
      width: 80%;
    }

    span {
      width: 18px;
      height: 18px;
      text-align: right;
      font-size: 36px;
      font-weight: bold;
      color: #0E66B3;
      z-index: 99;
      cursor: pointer;
      line-height: 22px;
    }
  }

  .queding {
    width: 136px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #00184B;
    opacity: 1;
    border: 1px solid #5B9FC3;
    font-size: 15px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 10px;
    float: right;
    cursor: pointer;
  }

  .el-table,
  .el-table__expanded-cell {
    background: none !important;
  }

  /deep/ .el-table th.el-table__cell {
    background-color: #04153B !important;
  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #04153B !important;
  }

  /deep/ .el-table tr {
    background-color: #04153B !important;

  }

  .export_table {
    border: solid 1px #0D369F;
  }

  /deep/ .el-table,
  .el-table__expanded-cell {
    background-color: none;
  }

  /deep/ .el-table::before {
    background-color: #0D369F !important;
  }

  /deep/ .cell {
    font-size: 14px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #BDE5FD;
  }

  /deep/ .table-cell {
    // border: 1px solid #d5e1f1 !important;
    border-radius: 5px !important;
    overflow: hidden;

    tr:nth-child(2n-1) {
      background-color: #04153B !important;
    }

    tr th {
      font-size: 18px;
      background-color: #04153B !important;

      .cell {
        text-align: center;
      }
    }
  }
}



.Sezitem {
  width: 100px;
  background: #021030;
  position: fixed;
  top: 43px;
  right: 405px;

  .queding {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #00184B;
    opacity: 1;
    border: 1px solid #5B9FC3;
    font-size: 10px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 10px;
    cursor: pointer;

  }

}
</style>